<template>
    <div class="link-item" @click="onChat(data.id)">
        <div class="avatar">
            <img :src="data.avatar">
        </div>
        <div class="center">
            <div class="name">
                <span>{{data.nickname}}</span>
            </div>
            <div class="desc">
                <span>针不错</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LinkItem',
    props: {
        data: {
            type: Object
        }
    },
    methods: {
        onChat(e) {
            this.$router.push(`/chat/${e}`)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.link-item{
    width:100%;
    display: flex;
    align-items: center;
    padding:0.3125rem;
    @include background_color("background_color5");
    .avatar{
        width:40px;
        height:40px;
        border-radius:100%;
        overflow: hidden;
        margin-right:8px;
        img{
            width:100%;
            height:100%;
            display: block;
            object-fit: cover;
        }
    }
    .center{
        flex:1;
        .name{
            font-size:16px;
            @include font_color("font_color1");
        }
        .desc{
            font-size:14px;
            @include font_color("font_color9");
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width:90%;
        }
    }
}
</style>